---
id: "react-component-decorator"
keywords: ["react", "component", "decorator"]
name: "@react.component"
summary: "This is the `@react.component` decorator."
category: "decorators"
---

The `@react.component` decorator is used to annotate functions that are [React](../docs/react/elements-and-jsx.mdx) components.

You will need this decorator whenever you want to use a ReScript / React component in ReScript JSX expressions.

> **Note**
> The `@react.component` decorator requires the [react-jsx or jsx config](../docs/react/installation.mdx) to be set in your `rescript.json` to enable the required React transformations.

### Example

<CodeTab labels={["ReScript", "JS Output"]}>

```res
@react.component
let make = (~name) => {
  <button> {React.string("Hello " ++ name ++ "!")} </button>
}
```

```js
import * as JsxRuntime from "react/jsx-runtime";

function Playground(props) {
  return JsxRuntime.jsx("button", {
    children: "Hello " + props.name + "!",
  });
}

var make = Playground;
```

</CodeTab>

### References

- [React Components](../docs/react/components-and-props.mdx)
